
<template>
  <main-container headerText="商品标签管理 >> 商品标签列表">
    <div class="content">
      <top-option>
        <div slot="left-box">
          <select-search
            lableName="类型"
            selectIdName="type"
            :tThis="this"
            selectPlaceholder="请选择类型"
            :selectOpts="typeOpts"
            selectWidth="150px;"
            labelWidth="80px;"
            @change="typeChangeF"
          />
        </div>
        <div slot="right-box">
          <div class="sub">
            <el-button @click="handleSearch" class="orange">查询</el-button>
            <el-button @click="toGoodsList" class="orange">去设置</el-button>
          </div>
        </div>
      </top-option>

      <!-- 列表栏 -->
      <div class="list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; border-radius: 4px"
          class="tableBox"
          border
        >
          <el-table-column label="序号" width="60">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">
              {{ scope.row.index || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="商品Id" width="undefined">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">
              {{ scope.row.shopGoodId || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="类型" width="undefined">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">{{
              typeShow[scope.row.type + ""] || "-"
            }}</template>
          </el-table-column>

          <el-table-column label="商品名" width="200">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">
              {{ scope.row.shopGood.name || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="上下架状态" width="undefined">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">{{
              stateShow[scope.row.shopGood.state + ""] || "-"
            }}</template>
          </el-table-column>

          <el-table-column label="品牌" width="undefined">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">
              {{ scope.row.shopGood.brandName || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="成本价" width="undefined">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">
              {{ scope.row.shopGood.floorPrice || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="京东价格" width="undefined">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">
              {{ scope.row.shopGood.price || "-" }}
            </template>
          </el-table-column>

          <el-table-column label="商品主图" width="undefined">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">
              <div v-if="scope.row.shopGood.imagePath" style="height: 100px">
                <el-image
                  :src="scope.row.shopGood.imagePath"
                  :preview-src-list="[scope.row.shopGood.imagePath]"
                >
                </el-image>
              </div>
              <div v-else>未上传图片</div>
            </template>
          </el-table-column>
          <el-table-column label="库存" width="undefined">
            <template slot-scope="scope" v-if="scope.row.shopGood != null">
              {{ scope.row.shopGood.inventory || "-" }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="paging">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPageIdx"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="onePageSize"
            layout="total, prev, pager, next, jumper"
            :total="pageCount"
          ></el-pagination>
        </div>

        <div class="confirm-btn">
          <el-button class="paging-btn" @click="handleEnter" size="small"
            >确定</el-button
          >
        </div>
      </div>
    </div>
  </main-container>
</template>

  <script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

import main_container from "@/components/main_container";
import top_option from "@/components/subCon/topOption";
import input_search from "@/components/subCon/inputSearch";
import select_search from "@/components/subCon/selectSearch";
import date_search from "@/components/subCon/dateSearch";

export default {
  components: {
    "main-container": main_container,
    "top-option": top_option,
    "input-search": input_search,
    "select-search": select_search,
    "date-search": date_search,
  },
  props: {},
  data() {
    return {
      //列表
      tableData: [],
      multipleSelection: [],
      //分页
      currentPageIdx: 1, //当前页与跳转框的初始值
      pageCount: 1, //总条数
      onePageSize: 10, //每页的条数

      formData: {
        type: "1",
      },

      typeOpts: [
        { value: "1", label: "拼了吗" },
        { value: "2", label: "天天特卖推荐" },
        { value: "3", label: "大家都想买" },
      ],
      typeShow: {
        1: "拼了吗",
        2: "天天特卖推荐",
        3: "大家都想买",
      },

      stateShow: {
        1: "上架",
        2: "下架"
      },

      allMethods: "",
    };
  },
  mounted() {
    this.allMethods = this.getAllMethods();

    this.initRequest();

    this.getInitData();
  },
  methods: {
    /* 类型改变 */
    typeChangeF() {
      this.getInitData();
    },

    //去设置
    toGoodsList() {
      this.$router.push({
        path: "/good_classify_m_good_list_table",
        name: "good_classify_m_good_list_table",
        query: { type: parseInt(this.formData.type) },
      });
    },

    //查询
    handleSearch() {
      this.allMethods.handleSearch();
    },
    //undefined
    handleAdd(e) {
      this.allMethods.handleAdd(e);
    },

    /* 方法抽离集合 */
    getAllMethods() {
      var _this = this;
      return {
        //查询
        handleSearch() {
          var { type } = _this.formData;
          _this.LingChuang_request.handleSearch({
            type,
            pageIndex: _this.currentPageIdx,
            pageSize: _this.onePageSize,
          });
        },
        //undefined
        handleAdd(e) {
          _this.$router.push({
            path: "undefined",
            query: {},
          });
        },
      };
    },

    //表格默认函数
    //初始化
    initRequest() {
      this.LingChuang_request = jhTools.LingChuang_request({
        this: this,
        pageUrl: API.good_classify_m.page,
        searchUrl: API.good_classify_m.page,
        type: this.formData.type,
        searchData: {},
      });
      // console.log(this.LingChuang_request);
    },
    //加载数据
    getInitData: function () {
      var _this = this;
      this.LingChuang_request.getInitData(
        {
          pageIndex: this.currentPageIdx,
          pageSize: this.onePageSize,
          type: this.formData.type,
        },
        function (res) {
          //初始格式化数据
        }
      );
    },
    //格式化数据
    formatData() {
      this.LingChuang_request.formatData();
    },
    //格式化页面
    formatPaging(res) {
      this.LingChuang_request.formatPaging(res);
    },
    //页数跳转
    handleSizeChange(val) {
      this.LingChuang_request.handleSizeChange(val);
    },
    //页面点击跳转
    handleCurrentChange(val) {
      this.LingChuang_request.handleCurrentChange(val);
    },
    //enter跳转
    handleEnter() {
      this.LingChuang_request.getPagingData(
        this.currentPageIdx,
        this.onePageSize
      );
    },
    //分页数据
    getPagingData(pageIndex, pageSize) {
      this.LingChuang_request.handleEnter(pageIndex, pageSize);
    },
    //列表勾选1
    toggleSelection(rows) {
      this.LingChuang_request.toggleSelection(rows);
    },
    //列表勾选2
    handleSelectionChange(val) {
      this.LingChuang_request.handleSelectionChange(val);
    },
    //表格默认函数

    /* 图片预览 */
    previewImgF({ imgUrl }) {
      this.tools.touchGEvent({
        eName: "previewImg",
        imgUrl,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

//隐藏样式类
.hidden {
  display: none !important;
}
</style>
